<template>
  <div>
    <ul class="mui-table-view mui-grid-view">
      <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in  list" :key="item.id" @click="gettail(item.id)">
        <a href="#">
          <img class="mui-media-object" :src="item.img_url">
          <!-- <img class="mui-media-object" src="../../images/menu1.png"> -->
          <div class="mui-media-body">{{item.title}}</div>
          <div class="info">
            <div class="price">
              <span class="newprice">{{item.sell_price}}</span>
              <span class="oldprice">{{item.market_price}}</span>
            </div>
            <p class="num">
              <span>热卖中</span>
              <span>剩余：{{item.stock_quantity}}件</span>
            </p>
          </div>
        </a>
      </li>
    </ul>

    <button type="button" class="mui-btn mui-btn-royal mui-btn-block" @click="getmore">Block button</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageindex: 1,
      list: []
    };
  },

  methods: {
    getGoodslits() {
      this.$http.get("api/getgoods?pageindex=" + this.pageindex).then(res => {
        if (res.body.status === 0) {
          this.list = this.list.concat(res.body.message);
        }
      });
    },
    getmore() {
      this.pageindex++;
      this.getGoodslits();
    },
    gettail(id){
        // console.log(this)
        this.$router.push('/home/goodsInfo/?id='+id)
    }
  },

  created() {
    this.getGoodslits();
  }
};
</script>

<style lang='less' scoped>
li {

  img{
    width: 100%;
    height: 100%;
  min-height: 186px;
  

  };
  .info {
    background-color: #ccc;
    .price {
      .newprice {
        color: red;
      }
      .oldprice {
        text-decoration: line-through;
        color: yellow;
      }
    }
    .num {
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
